html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #4e2279;
    // background-color: red;
    // overflow: hidden;
}

.ui-night {
    width: 100vw;
    height: 100vh;
    // width: 100%;
    // min-height: 100%;
    background-image: url('../../image/common/sky.gif');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    font-size: 0;
    .search {
        border: none;
        border-radius: 1rem; // box-sizing: border-box;
        display: flex;
        align-items: center;
        height: .6rem;
        background-color: #fff;
        padding: .2rem .2rem;
        z-index: 9;
        position: absolute;
        margin: auto;
        top: .2rem;
        left: .1rem;
        right: .1rem;
        .search-img {
            display: inline-block;
            background-image: url(../../image/main/search.png);
            background-size: cover;
            width: .4rem;
            height: .4rem;
            background-repeat: no-repeat;
        }
        form {
            display: block;
            padding: 0;
            margin: 0;
            height: .8rem;
            line-height: .8rem; // width: 100%;
        }
        input {
            display: block;
            margin: 0 .4rem;
            border: none;
            height: .6rem;
            line-height: .6rem;
            width: 5rem;
            font-size: .3rem;
            outline: none;
            margin-top: .1rem;
        }
        .icon {
            background-image: url(../../image/account/del.png);
            background-size: cover;
            width: .4rem;
            height: .4rem;
            background-repeat: no-repeat;
        }
    }
    .images {
        width: 100%;
        height: 100%;
        .swiper-slide {
            height: 100%;
            display: flex;
            justify-content: center;
            img {
                text-align: center;
                width: 100%;
                height: 100%;
            }
        }
        .swiper-button-prev,
        .swiper-button-next {
            width: .16rem;
            height: .46rem;
            color: #FFFFFF;
            background-size: 100% 100%;
            top: 3rem;
        }
        .swiper-button-prev {
            left: .64rem;
        }
        .swiper-button-next {
            right: .64rem;
        }
    }
    .ui-list{
        width: 100%;
        padding: 1.2rem .4rem 0;
        .ui-list-item{
            display: inline-block;
            position: relative;
            width: 33.3%;
            height: 2.44rem;
            padding-top: 1.42rem;
            .ui-item-icon{
                display: block;
                position: absolute;
                top: 0;
                left: 50%;
                margin-left: -.66rem;
                width: 1.32rem;
                height: 1.32rem;
                background-repeat: no-repeat;
                background-position: center center;
                background-size: 100% 100%;
            }
            .ui-item-name{
                line-height: .4rem;
                width: 100%;
                font-size: .3rem;
                color: #fff;
                text-align: center;
            }
            .ui-item-date{
                line-height: .36rem;
                width: 100%;
                font-size: .26rem;
                color: #fff;
                text-align: center;
            }
        }
    }
}